<template>
  <div class="body">
    <nut-navbar @on-click-back="$router.back()" :rightShow="false">我的预约</nut-navbar>

    <div class="appintment-top">
        <nut-tab @tab-switch="tabSwitch">
            <nut-tab-panel tabTitle="预留">
                <div class="list">
                    <ul>
                        <li :class="activeClass == index ? 'active':''" v-for="(item,index) in itemList" :key="index">
                            <nut-row >

                                <nut-col :span="19">
                                    <div class="title">{{item.reserve_person}}</div>
                                    <div class="time" v-for="(vo,index) in itemContent" :key="index">{{vo.venue_title}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{vo.reserveDay}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{vo.name}}</div>
                                </nut-col>

                                <nut-col class="button-list" :span="5">
                                    <button class="handover" @click="addOrderid(item.order_id)">交订</button>
                                    <button class="cancel" @click="addCancel(item.order_id)">取消</button>
                                    <!-- <button class="booked">已预订</button> -->
                                </nut-col>
                            </nut-row>
                            <div class="icon" @click="addContent(item.order_id,index)">  
                                <nut-col :span="19">
                                </nut-col>
                                <nut-col :span="5">
                                   <div class="down"></div>
                                </nut-col>
                            </div>
                        </li>
                        <!-- <li>
                            <nut-row>
                                <nut-col :span="20">
                                    <div class="flex-content">span:12</div>
                                </nut-col>
                                <nut-col :span="4">
                                    <div class="flex-content flex-content-light">span:12</div>
                                </nut-col>
                            </nut-row>
                        </li> -->
                    </ul>
                </div>
            </nut-tab-panel>
            <nut-tab-panel tabTitle="已交订">
                <div class="list">
                    <ul>
                        <li :class="activeClass == index ? 'active':''" v-for="(item,index) in itemList" :key="index">
                            <nut-row >

                                <nut-col :span="19">
                                    <div class="title">{{item.reserve_person}}</div>
                                    <div class="time" v-for="(vo,index) in itemContent" :key="index">{{vo.venue_title}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{vo.reserveDay}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{vo.name}}</div>
                                </nut-col>

                                <nut-col class="button-list" :span="5">
                                    <button class="handover">已交订</button>
                                    <!-- <button class="cancel" @click="addCancel(item.order_id)">取消</button> -->
                                    <!-- <button class="booked">已预订</button> -->
                                </nut-col>
                            </nut-row>
                            <div class="icon" @click="addContent(item.order_id,index)">  
                                <nut-col :span="19">
                                </nut-col>
                                <nut-col :span="5">
                                   <div class="down"></div>
                                </nut-col>
                            </div>
                        </li>
                        <!-- <li>
                            <nut-row>
                                <nut-col :span="20">
                                    <div class="flex-content">span:12</div>
                                </nut-col>
                                <nut-col :span="4">
                                    <div class="flex-content flex-content-light">span:12</div>
                                </nut-col>
                            </nut-row>
                        </li> -->
                    </ul>
                </div>
            </nut-tab-panel>
            <nut-tab-panel tabTitle="开会中">
                <div class="list">
                    <ul>
                        <li :class="activeClass == index ? 'active':''" v-for="(item,index) in itemList" :key="index">
                            <nut-row >

                                <nut-col :span="19">
                                    <div class="title">{{item.reserve_person}}</div>
                                    <div class="time" v-for="(vo,index) in itemContent" :key="index">{{vo.venue_title}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{vo.reserveDay}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{vo.name}}</div>
                                </nut-col>

                                <nut-col class="button-list" :span="5">
                                    <button class="handover">已交订</button>
                                    <!-- <button class="cancel" @click="addCancel(item.order_id)">取消</button> -->
                                    <!-- <button class="booked">已预订</button> -->
                                </nut-col>
                            </nut-row>
                            <div class="icon" @click="addContent(item.order_id,index)">  
                                <nut-col :span="19">
                                </nut-col>
                                <nut-col :span="5">
                                   <div class="down"></div>
                                </nut-col>
                            </div>
                        </li>
                        <!-- <li>
                            <nut-row>
                                <nut-col :span="20">
                                    <div class="flex-content">span:12</div>
                                </nut-col>
                                <nut-col :span="4">
                                    <div class="flex-content flex-content-light">span:12</div>
                                </nut-col>
                            </nut-row>
                        </li> -->
                    </ul>
                </div>
            </nut-tab-panel>
            <nut-tab-panel tabTitle="已取消">
                <div class="list">
                    <ul>
                        <li :class="activeClass == index ? 'active':''" v-for="(item,index) in itemList" :key="index" >
                            <nut-row >

                                <nut-col :span="19">
                                    <div class="title">{{item.reserve_person}}</div>
                                    <div class="time" v-for="(vo,index) in itemContent" :key="index">{{vo.venue_title}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{vo.reserveDay}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{vo.name}}</div>
                                </nut-col>

                                <nut-col class="button-list" :span="5">
                                    <!-- <button class="handover" @click="addOrderid(item.order_id)">交订</button> -->
                                    <button class="cancel">已取消</button>
                                    <!-- <button class="booked">已预订</button> -->
                                </nut-col>
                            </nut-row>
                            <div class="icon" @click="addContent(item.order_id,index)">  
                                <nut-col :span="19">
                                </nut-col>
                                <nut-col :span="5">
                                   <div class="down"></div>
                                </nut-col>
                            </div>
                        </li>
                        <!-- <li>
                            <nut-row>
                                <nut-col :span="20">
                                    <div class="flex-content">span:12</div>
                                </nut-col>
                                <nut-col :span="4">
                                    <div class="flex-content flex-content-light">span:12</div>
                                </nut-col>
                            </nut-row>
                        </li> -->
                    </ul>
                </div>
            </nut-tab-panel>
        </nut-tab>
    </div>

  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import moment from 'moment'
  import { getListApi, getDetailsByIdApi } from '../../api/schedule'
  import { IconUrl } from '../../utils/auxiliary'

  export default {
    data () {
      return {
        activeClass: 0,
        radioGroupVal1:"a",
        // itemList:[
        //     {
        //         title:"某某客户",
        //         time:"奇点年会   2019年07月16日    上午"
        //     },
        //     {
        //         title:"某某客户",
        //         time:"奇点年会   2019年07月16日    上午"
        //     },
        // ]
        itemList:[],
        itemContent:[]
      }
    },
    
    computed: {
      ...mapGetters([
        'userInfo'
      ])
    },

    async mounted () {
      this.getmentList(1,0);
    },

    methods: {
        tabSwitch:function(index,event){
            var num = 0;
            var date = 0;
            if(index == 0){
                num = 1;
            }else if(index == 1){
                num = 2; 
                date = 1;
            }else if(index == 2){
                num = 2; 
                date = 2;
            }else{
                num = 0
            }
            if(num == 2){
                this.getmentList2(num,date,0);
            }else{
                this.getmentList(num,0);
            }
            
        },
        getItme123:function(index) {
            // let height= this.$refs.getheight.offsetHeight; 
            // console.log(height);
            // this.activeClass = index;  // 把当前点击元素的index，赋值给activeClass
            
        },
        getmentList2(id,date,index){
            this.$http.get(this.$url + '/inf/venue/getMyVenueOrderList',{
                params:{
                    salesman:this.userInfo.userId,
                    // salesman:"c0389cfd-a74e-46ad-a2fc-1c0d50875bc2",
                    state:id,
                    date:date,
                }
            })
            .then(response => {
                this.activeClass = index;
                this.itemList = response.data;
                this.addContent(response.data[0].order_id,0)
            })
        },
        getmentList(id,index){
            this.$http.get(this.$url + '/inf/venue/getMyVenueOrderList',{
                params:{
                    salesman:this.userInfo.userId,
                    // salesman:"c0389cfd-a74e-46ad-a2fc-1c0d50875bc2",
                    state:id,
                }
            })
            .then(response => {
                this.activeClass = index;
                this.itemList = response.data;
                this.addContent(response.data[0].order_id,0)
            })
        },//获取列表
        addOrderid(id){
            // this.$http.get(this.$url + '/inf/venue/deposit',{
            //     params:{
            //         orderId:id,
            //     }
            // })
            // .then(response => {
            //     if(response.data.flag == 3){
            //         alert("已交订");
            //         this.getmentList(1);
            //     }
            // })
            this.$router.push('/theater_user?id=' + id)
        },//交订按钮

        addCancel(id){
            this.$http.get(this.$url + '/inf/venue/cancel',{
                params:{
                    orderId:id,
                }
            })
            .then(response => {
                if(response.data.flag == 3){
                    alert("已取消");
                    this.getmentList(1);
                }
            })
        },//取消按钮

        addContent(id,index){
            this.itemContent = ""
            this.$http.get(this.$url + '/inf/venue/getOrderIdInfoList',{
                params:{
                    orderId:id,
                }
            })
            .then(response => {
                this.activeClass = index;
                this.itemContent = response.data.list
            })
        }//获取下拉
        
        // downswitch:function(e){
        //     console.log(e.currentTarget.parentElement);
        //     // if(this.isActive == false){
        //     //     this.isActive = true
        //     // }else{
        //     //     this.isActive = false
        //     // }
        // },
    }
  }
</script>

<style lang="scss">
  body{
    background: #F9F9F9;
  }
  .appintment-top{
      width: 100%;
      .nut-tab{
          padding:0;
          border:0;
          .nut-tab-title{
              b{
                  background:#B29462;
              }
          }
          .nut-tab-active .nut-tab-link{
              color:#B29462;
              font-weight: inherit;
          }
      }
      .nut-tab-item{
          background: #F9F9F9;
          border: 0px;
          height: auto;
      }
      .list{
          li{
            padding:10px 1rem;
            background: #fff;
            border-radius: 3px;
            margin-bottom:1rem;
            overflow: hidden;
            .nut-row{
                height: 35px;
                overflow: hidden;
                transition:height 2s;
            }
            .title{
                width: 100%;
                font-size: 14px;
                margin-bottom: 33px;
            }
            .time{
                font-size: 14px;
            }
            .button-list{
                text-align: center;
                button{
                    border:0;
                    width: 100%;
                }
                .handover{
                    color:#fff;
                    background: #B29462;
                    padding:5px 0;
                    margin-bottom:10px;
                }
                .cancel{
                    color:#fff;
                    background: #D2D2D2;
                    padding:5px 0;
                    margin-bottom:10px;
                }
                .booked{
                    color:#fff;
                    background: #2E2F31;
                    padding:5px 0;
                    margin-bottom:10px;
                }
            }
            .icon{
                width: 100%;
                height: 15px;
                .nut-col{
                    height: 15px;
                }
                .down{
                    width: 100%;
                    height: 15px;
                    background: url("../../assets/icon/down.png") no-repeat center center;
                    background-size:20%;
                }
            }
          }
      }
  }

.active {
  .nut-row{
      height: auto!important;
  }
}
 
</style>
